import React from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import { BrowserRouter as Router, Route, Routes, Link, Outlet, useNavigate, useLocation } from 'react-router-dom'
import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline, } from 'antd-mobile-icons';

import style from './index.module.css';
const Container = (props) => {
    const navigate = useNavigate();
    const location = useLocation()
    const setRouteActive = (value) => {
        navigate(value)
    };
    const tabs = [
        {
            key: '',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/news',
            title: '我的待办',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/message',
            title: '我的消息',
            icon: <MessageOutline />,
        },
        {
            key: '/user',
            title: '个人中心',
            icon: <UserOutline />,
        },
    ];
    return (
        <div className={style.container}>
            <Outlet></Outlet>
            <div className={style.tab_container}>
                <TabBar activeKey={location.pathname} onChange={value => setRouteActive(value)}>
                    {tabs.map(item => (<TabBar.Item key={props.path + item.key} icon={item.icon} title={item.title} />))}
                </TabBar>
            </div>
        </div >);
};

export default Container;

